<template>
  <div class="city-list">
        <div class="city-box">
      <van-index-bar :index-list="customData" :sticky-offset-top="offsetTop">
        <div class="wrapper">
          <div class="current-position">
            <van-index-anchor index="当前定位" class="current-txt" />
            <van-cell title="广州" class="current-city current" />
          </div>

          <div class="visited-city">
            <van-index-anchor index="最近访问城市" class="visited-txt" />
            <div class="citys">
              <van-cell title="广州" class="city-name" />
              <!-- <van-cell title="最近1" class="city-name" /> -->
            </div>
          </div>

          <div class="hot-city">
            <van-index-anchor index="热门城市" class="hot-txt" />
            <div class="citys">
              <van-cell
                :title="hotCity"
                class="city-name"
                v-for="(hotCity, index) in hotCities"
                :key="index"
                @click="changeCityname(hotCity)"
              />
            </div>
          </div>
        </div>

        <div class="city-list">
          <div v-for="(item,index) in city" :key="index">
            <!-- <div v-for="(v,index) in city" :key="index"> -->
            <!-- {{index}} {{item.cityList}} -->
            <van-index-anchor :index="item.letter" />
          <van-cell :title="city.nm"
           v-for="(city,index) in item.cityList" :key="index"
             @click="changeCityname(city.nm)"
           />
          </div>
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex';
  export default {
    name:'CityList',
    data(){
      return{
        offsetTop:50,
              customData: [
        "当前定位",
        "最近",
        "热门",
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
      }
    },
    props:['city','hotCities'],
    methods:{
      changeCityname(cityname){
        this.changeCity(cityname);
        // 选中城市后返回首页
        this.$router.push('/');
      },
      changeCityname2(cityname2){
        this.changeCity(cityname2);
        // 选中城市后返回首页
        this.$router.push('/');
      },

      ...mapMutations(['changeCity'])
    }
  }
</script>

<style lang="less" scoped>
.city-box {
  background-color: #f5f5f5;
  padding: 14px 0 0;
  .wrapper {
    background-color: #fff;
    padding: 12px;
    padding-bottom: 2px;
    /deep/ .van-index-anchor {
      font-size: 14px;
      color: #a3a3a3;
      line-height: 14px;
      padding: 0;
    }
    /deep/ .van-cell__title {
      text-align: center;
      line-height: 16px;
    }
    .current {
      // border: 1px solid #000;
      position: relative;
      /deep/ .van-cell__title {
        position: absolute;
        left: 44px;
      }
    }
  }
}
.current-position,
.visited-city,
.hot-city {
  // border: 1px solid #000;
  margin-bottom: 20px;

  .current-city {
    margin-top: 10px;
    width: 120px;
    height: 36px;
    background-color: #fff;
    border: 1px solid #ccc;
    font-size: 16px;
    color: #2b2b2b;
    background-image: url("../assets/position.png");
    background-repeat: no-repeat;
    background-size: 17px 18px;
    background-position: 23px 8px;
    border-radius: 5px;
  }
}
.citys {
  display: flex;
  flex-wrap: wrap;
}
.city-name {
  margin-top: 10px;
  width: 100px;
  height: 36px;
  background-color: #fff;
  border: 1px solid #ccc;
  font-size: 16px;
  color: #2b2b2b;
  margin-right: 10px;
  border-radius: 5px;
}

/deep/ .van-index-bar__sidebar {
  // background-color: #ccc;
  padding: 2px 0px;
  top: 60%;
  margin-right: 8px;

  .van-index-bar__index {
    // border: 1px solid red;
    color: #333;
    font-size: 13px;
    margin: 0;
    padding: 0 0 3px;
    width: 30px;
  }
}
.city-list {
  background-color: #fff;
  // border: 1px solid #000;
  margin-top: 14px;
}
</style>